<template>
  <a-input-search
    v-model:value="searchParams.text"
    placeholder="input search text"
    enter-button
    @search="onSearch"
  />
  <MyDivider />
  <a-tabs v-model:activeKey="activeKey" @change="changePage">
    <a-tab-pane key="postlist" tab="文章" force-render>
      <PostList :listpost="listpost" />
    </a-tab-pane>
    <a-tab-pane key="userlist" tab="图片">
      <PictureList />
    </a-tab-pane>
    <a-tab-pane key="picturelist" tab="用户">
      <UserList />
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import MyDivider from "@/views/MyDivider.vue";
import PictureList from "@/components/PictureList.vue";
import UserList from "@/components/UserList.vue";
import PostList from "@/components/PostList.vue";

import { useRoute, useRouter } from "vue-router";
import myAxios from "@/plugins/myAxios";

const router = useRouter();
const route = useRoute();
const searchValue = ref();
const activeKey = route.params.category;
const cpage = ref();
const listpost = ref([]);

const initText = route.query.text; //用于记录为什么路由的text参数
const initSearchParams = {
  //要有默认值可以使用。
  text: initText,
  pageSize: 10,
  pageNum: 1,
};
const searchParams = ref(initSearchParams); //搜索的，因为可变

watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: route.query.text,
  } as any;
});

const onSearch = (value: any) => {
  //如果没有要跳转的路径，直接传递参数就可以。
  router.push({
    query: {
      text: value,
    },
  });
  loadData(searchParams.value);
};
const loadData = (query: any) => {
  myAxios
    .post("question/list/page/vo", {
      ...query,
      title: query.text,
    })
    .then((data) => {
      listpost.value = data.records;
      console.log(listpost.value);
    });
};
loadData(initSearchParams);

const changePage = (value) => {
  cpage.value = value;
  router.push({
    path: `/${value}`,
    query: {
      text: searchValue.value,
    },
  });
};
</script>

<style scoped></style>
